<template>
  <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
    <el-form-item label="用户名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    <el-form-item label="手机号码" prop="iphone">
      <el-input v-model.number="ruleForm.iphone"></el-input>
    </el-form-item>

    <el-form-item label="用户邮箱" prop="emil">
      <el-input v-model="ruleForm.emil"></el-input>
    </el-form-item>

    <el-form-item label="用户性别" prop="sex">
      <el-radio-group v-model="ruleForm.sex">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>

  </el-form>
</template>

<script>
import UserApi from '@/api/user/UserApi';
export default {
  name: "UserProfile",
  data() {
    var checkIphone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            // console.log(value.toString().length)
            if (value.toString().length == 11) {
                callback();
            } else {
                callback(new Error('手机号必须11位'));
            }
          }
        }, 500);
      };
    return {
      ruleForm: {
        id: sessionStorage.getItem('userId'),
        name: "",
        iphone: "",
        emil: "",
        sex: "",
        img: ""
      },
      rules: {
          name: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          iphone: [
            {required: true, validator: checkIphone, trigger: 'blur' }
          ],
          emil: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]
      },

    };
  },
  created() {
    UserApi.UserInfo().then(res => {
      // console.log(res.data);
      this.ruleForm.name=res.data.data.name;
      this.ruleForm.iphone=parseInt(res.data.data.iphone);
      this.ruleForm.emil=res.data.data.emil;
      this.ruleForm.sex=res.data.data.sex;
    })
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          UserApi.setUserInfo(this.ruleForm).then(res => {
            if (res.data.code == 1) {
              // 调用自定义事件更新父组件的用户信息
              this.$emit('updata');
              // 更新头部用户头像
              this.$store.commit("UserInfo/updataUserImg",this.ruleForm.img);
              console.log(this.$store)
              this.$message.success(res.data.message);
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
};
</script>

<style scoped>
  .el-button--primary {
    position:static
  }
</style>>